<template>
  <view>
    <movable-area class="online-box" style="width:100vw;" :style="{ height: height }">
      <movable-view style="z-index:2;" :x="x" :y="y" friction="10" inertia="false" direction="all"
        :animation="moveAnimation">
        <view class="kf_button" @click="iconClick">
          <image class="bg"  :src="iconSrc">
          </image>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        height: 0,
        x:100,
        y:530
      };
    },
    props: {
      iconSrc: {
        typeof: String
      }
    },
    mounted() {
      let systemInfo = uni.getSystemInfoSync()
      this.x = systemInfo.windowWidth - 80
      this.y = (systemInfo.windowHeight / 10) * 6.2
      this.height = systemInfo.windowHeight - getApp().globalData.navBarHeight + 'px'
    },
    onLoad() {},
    methods: {
      iconClick() {
        this.$emit('iconClick')
      }
    }
  };
</script>
<style lang="less">
  .kf_button {
    width: 100%;
    height: 100%;

    .bg {
      width: 108rpx;
      height: 108rpx;
    }

    .tip {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      right: 2px;
      background: #CB171A;
      line-height: 32rpx;
      color: #fff;
      border-radius: 50%;
      font-size: 10px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 20px;
      }
    }
  }

  .online-box {
    position: fixed;
    left: 0;
    top: 168rpx;
    z-index: 1000;
    background-color: transparent;
  }

  movable-area {
    position: relative;
    pointer-events: none;
  }

  movable-view {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    // position: fixed;
    z-index: 9999;
    width: 108rpx !important;
    height: 108rpx !important;
    right: auto;
  }
</style>
